<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>Procedural GL JS</title>
        <meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@7.2.0/dist/css/autoComplete.min.css">
        <style>
            html, body {
                margin: 0;
            }
        </style>
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    </head>

    <body>
        <div style="position: absolute; width: 100%; height: 100%;" id="container">
        </div>
    </body>
    <script type="module">
        import Procedural from './build/procedural-gl.dev.js';

        // For testing useful to have Procedural API in global scope
        window.Procedural = Procedural;

        // Initialize the engine with a location and inject into page
        const container = document.getElementById( 'container' );

        // Define API Keys (replace these with your own!)
        // To obtain an API key go to:
        // https://cloud.maptiler.com/account/?ref=procedural
        const MAPTILER_APIKEY = null;
        if ( !MAPTILER_APIKEY ) {
          const error = Error( 'Modify index.dev.html to include API keys' );
          container.innerHTML = 'Modify datasource definition to contain a valid API key. <a href="https://cloud.maptiler.com/account/?ref=procedural">Click here to get a free API key</a>'; 
          throw error;
        }

        const datasource = {
          provider: 'maptiler',
          apiKey: MAPTILER_APIKEY,
        }
        
        // Custom datasource definition
        //const datasource = {
        //  elevation: {
        //    apiKey: 'GET_AN_API_KEY_FROM_YOUR_ELEVATION_PROVIDER',
        //    attribution: 'Elevation attribution',
        //    pixelEncoding: 'nasadem', // or 'terrain-rgb', 'terrarium'
        //    urlFormat: 'https://elevation.example.com/tiles/{z}/{x}/{y}.jpg?key={apiKey}'
        //  },
        //  imagery: {
        //    apiKey: 'GET_AN_API_KEY_FROM_YOUR_IMAGERY_PROVIDER',
        //    attribution: 'Imagery attribution',
        //    urlFormat: 'https://imagery.example.com/tiles/{z}/{x}/{y}.jpg?key={apiKey}'
        //  }
        //}

        Procedural.init( { container, datasource } );
        Procedural.setCameraModeControlVisible( true );
        Procedural.setCompassVisible( true );
        Procedural.setUserLocationControlVisible( true );
        Procedural.setRotationControlVisible( true );
        Procedural.setZoomControlVisible( true );

        // Load random location
        const latitude = 42 + 8 * Math.random();
        const longitude = 6 + 8 * Math.random();
        Procedural.displayLocation( {
          latitude:latitude, longitude:longitude
        } );
    </script>
</html>
